<!-- Optional alert component at the top of the view -->
<app-alert></app-alert>

<!-- ---------------------------- Dev mode components -------------------------------- -->
<app-header *ngIf="gs.showDevUI()" ></app-header>

<div class="main-container">
   <table style="height:100%;width:100%"><tr>

      <!-- Dev mode left sidenav used as a mock navigator -->
      <td *ngIf="gs.showSidenav()" class="td-sidenav">
         <sidenav [parent]="instance"></sidenav>
      </td>
      <td *ngIf="chassis"  class="td-subnav">
         <!-- Subnav tabs to switch between object views -->
         <subnav *ngIf="gs.showDevUI()" [objectId]="chassis.id" [objectType]="'chassis'"></subnav>

<!-- ---------------------------- Summary view content -------------------------------- -->
         <div class="content-container">

            <div class="content-area" style="padding: 10px">
               <div>
                  <div style="display:inline-block">
                     <h3>
                        <clr-icon shape="view-list" size="48"></clr-icon>
                        {{i18n.translate("summary.title", chassis.name)}}
                     </h3>
                  </div>
                  <div style="float:right;width:300px">
                     <div class="progress-group">
                        <div class="row">
                           <div class="col-xs-6">{{i18n.translate("summary.health")}}</div>
                        </div>
                        <div class="progress-static labeled success">
                           <div class="progress-meter" [attr.data-value]="level1"></div>
                           <span>{{level1}}%</span>
                        </div>
                     </div>
                     <div class="progress-group">
                        <div class="row">
                           <div class="col-xs-6">{{i18n.translate("summary.compliance")}}</div>
                        </div>
                        <div class="progress-static labeled danger">
                           <div class="progress-meter" [attr.data-value]="level2"></div>
                           <span>{{level2}}%</span>
                        </div>
                     </div>
                  </div>
               </div>

               <!-- Portlets area -->
               <div class="card clickable">
                  <div class="card-header">
                     {{i18n.translate("summary.mainInfo", chassis.name)}}
                  </div>
                  <div class="card-block">
                     <p class="card-text">{{i18n.translate("summary.name", chassis.name)}}</p>
                     <p class="card-text">{{i18n.translate("summary.dimensions", chassis.dimensions)}}</p>
                     <p class="card-text">{{i18n.translate("summary.serverType", chassis.serverType)}}</p>
                     <a (click)="editChassis()" class="btn btn-primary">
                        {{i18n.translate("menu.edit")}}</a>
                  </div>
               </div>
               <div class="card clickable">
                  <div class="card-header">
                     {{i18n.translate("config.portlet")}}
                  </div>
                  <div class="card-block">
                     <p class="card-text">{{i18n.translate("addDetails")}}</p>
                     <a (click)="nav.showObjectView(chassis.id, 'chassis', 'manage')" class="btn btn-link">
                        {{i18n.translate("gotoConfigure")}}</a>
                  </div>
               </div>
               <div class="card clickable">
                  <div class="card-header">
                     {{i18n.translate("monitor.portlet")}}
                  </div>
                  <div class="card-block">
                     <p class="card-text">{{i18n.translate("addDetails")}}</p>
                     <a (click)="nav.showObjectView(chassis.id, 'chassis', 'monitor')" class="btn btn-link">
                        {{i18n.translate("gotoMonitor")}}</a>
                  </div>
               </div>
            </div>
         </div>
<!-- ---------------------------- End Summary view content -------------------------------- -->

      </td>
   </tr></table>
</div>
<!-- modal dialog for the chassis editor -->
<dialog-box *ngIf="!gs.isPluginMode()"></dialog-box>